<template>
	<view>
		<u-navbar back-text="" :title="title" :border-bottom="false"></u-navbar>
		<view class="hander-info">
			<view class="title-info">
				<view class="title-txt">片区名称</view>
				<view class="title-value">
					<text>高教园片区</text>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">片区图片</view>
				<view class="box-view">
					<image src="../../static/aidex/images/head.png" mode=""></image>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">附件</view>
				<view class="box-view">
					<image src="/static/icon-pdf.png" mode=""></image>
				</view>
			</view>
			<u-gap height="16" bg-color="#F8F8F8"></u-gap>
			<view class="title-info">
				<view class="title-txt">所属项目</view>
				<view class="title-value">
					<text>杭州人社局</text>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">负责人</view>
				<view class="title-value">
					<text>赵一</text>
					<image src="/static/icon-pos.png" mode=""></image>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">负责人电话</view>
				<view class="title-value">
					<text>17382909821</text>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">项目经理</view>
				<view class="title-value">
					<text>李奇泽</text>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">项目经理电话</view>
				<view class="title-value">
					<text>13899265734</text>
				</view>
			</view>
			<view class="title-info">
				<view class="title-txt">备注</view>
				<view class="title-value">
					<text>一年一签</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				form: {
					name: ''
				},
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: '',
					}
				]
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.title = option.title
		}
	}
</script>

<style lang="scss" scoped>
.hander-info {
	margin-top: 16rpx;
	background: #fff;
	.title-info {
		padding: 24rpx 30rpx;
		.title-txt {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 20rpx;
		}
		.title-value {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: flex-start;
			text {
				line-height: 48rpx;
			}
			image {
				width: 44rpx;
				height: 44rpx;
				margin-left: 16rpx;
			}
		}
		.box-view {
			image {
				width: 152rpx;
				height: 152rpx;
				border-radius: 4px;
				margin-right: 16rpx;
				margin-top: 16rpx;
			}
		}
	}
	.time-box {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		.column-box {
			width: 345px;
			height: 136px;
			padding: 32rpx;
			background: #F1F2F5;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.step-box {
				display: flex;
				align-items: center;
				.dian {
					width: 16rpx;
					height: 16rpx;
					background: #CECECE;
					border-radius: 50%;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					&::after {
						display: inline-block;
						content: " ";
						width: 2rpx;
						height: 136rpx;
						background-color: #ccc;
					}
				}
				.last-dian {
					&::after {
						display: none;
					}
				}
				.step-h3 {
					display: block;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.step-p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
}
</style>
